  <template>
  	<view>
  		<carHeader :title="'核销记录'"></carHeader>
  		<view class="input">
  			<u--input class="shuru" placeholder="请输入需要搜索的内容" border="surround" 
			v-model="value" @input="handleInput">
  			</u--input>
  			<image class="img1" src="../../static/车联网服务商家端-03核销记录_slices/搜索.png" 
			@click="search"></image>

  		</view>
  		<block v-for="(item,index) in list" key="index">
  			<view class="one">
  				<text class="text1">{{item.name}}</text>
  				<view class="text2">下单用户：{{item.userName}}</view>
  				<view class="text3">实付金额：￥{{item.payPrice}}</view>
  				<view class="text4">核销时间：{{item.createTime}}</view>
  			</view>
  		</block>
  	</view>
  </template>

  <script>
  	import input from '../../uni_modules/uview-ui/libs/config/props/input';
  	import list from '../../uni_modules/uview-ui/libs/config/props/list'
  	export default {
  		data() {
  			return {
  				list: [],
				value:''
  			}
  		},
  		onLoad() {
  			const that = this; // 保存 this 的引用
  			uni.request({
  				url: 'http://localhost:8080/carShop/details/couponzh',
  				method: "GET",
  				success: function(res) {
  					console.log(res);
  					if (res.statusCode === 200) {
  						// console.log(res.data.list)
  						console.log(res.data);
  						that.$set(that, 'list', res.data); // 直接更新 list
  						that.list = res.data
  					} else {
  						console.error('请求失败，状态码：', res.statusCode);
  					}
  				},
  				fail: function(err) {
  					console.error('请求失败：', err);
  				}
  			});
  		},
  		methods: {
  			search() {
  				uni.request({
  					url: 'http://localhost:8080/carShop/details/searchzh',
  					method: "Post",
  					header: {
  						'content-type': 'application/json',
  					},
  					data: {
  						frontData: this.value
  					},
  					success: (res) => {
  						if (res.statusCode == 200) {
  							if (res.data && res.data) {
  								this.list = res.data;
  							} else {
  								console.error('不符合预期');
  							}
  						} else {
  							console.error('请求失败', res.statusCode);
  						}
  					},
  					fail: (err) => {
  						console.error('请求失败', err);
  					}
  				});
  			}
  		}
  	}
  </script>

  <style lang="scss">
	  
	  .input{
		  position: absolute;
		  top: 100rpx;
		  background-color: white;
		  left: 2.5%;
		  // border-radius: 20px;
		  width: 90%;
		  z-index: 3;
		  
	  }
  	.one {
  		width: 90%;
  		height: 280rpx;
  		background-color: white;
  		position: relative;
  		top: -100rpx;
  		left: 5%;
  		border-radius: 10px;
  		margin-bottom: 20rpx;
  		padding-top: 35rpx;


  		.xian {
  			height: 10px;
  			width: 100%;
  			background-color: #f5f5f5;
  			// margin-left: 60rpx;
  		}

  		.text1 {
  			height: 60rpx;
  			margin-left: 60rpx;
  			margin-top: 40rpx;
  			font-size: 35rpx;
  			font-weight: 600;
  		}

  		.text2 {
  			margin-left: 60rpx;
  			margin-top: 20rpx;
  			font-size: 30rpx;
  		}

  		.text3 {
  			margin-left: 60rpx;
  			margin-top: 20rpx;
  			font-size: 30rpx;
  		}

  		.text4 {
  			margin-left: 60rpx;
  			margin-top: 20rpx;
  			color: gray;
  		}
  	}

  	.two {
  		width: 100%;
  		height: 300rpx;
  		background-color: white;
  		position: absolute;
  		top: 600rpx;
  		// left: 70rpx;
  		border-radius: 10px;

  		.xian {
  			height: 5px;
  			width: 100%;
  			background-color: #f5f5f5;

  		}

  		.text1 {
  			margin-left: 60rpx;
  			margin-top: 20rpx;
  			font-size: 35rpx;
  			font-weight: 600;
  		}

  		.text2 {
  			margin-left: 60rpx;
  			margin-top: 20rpx;
  			font-size: 30rpx;
  		}

  		.text3 {
  			margin-left: 60rpx;
  			margin-top: 20rpx;
  			font-size: 30rpx;
  		}

  		.text4 {
  			margin-left: 60rpx;
  			margin-top: 20rpx;
  			color: gray;
  		}
  	}

  	.three {
  		width: 100%;
  		height: 300rpx;
  		background-color: white;
  		position: absolute;
  		top: 950rpx;

  		border-radius: 10px;

  		.xian {
  			height: 5px;
  			width: 100%;
  			background-color: #f5f5f5;
  			// margin-left: 60rpx;
  		}

  		.text1 {
  			margin-left: 60rpx;
  			margin-top: 20rpx;
  			font-size: 35rpx;
  			font-weight: 600;
  		}

  		.text2 {
  			margin-left: 60rpx;
  			margin-top: 20rpx;
  			font-size: 30rpx;
  		}

  		.text3 {
  			margin-left: 60rpx;
  			margin-top: 20rpx;
  			font-size: 30rpx;
  		}

  		.text4 {
  			margin-left: 60rpx;
  			margin-top: 20rpx;
  			color: gray;
  		}
  	}

  	
  		.shuru {
  			position: absolute;
  			top: -100rpx;
  			background-color: white;
  			left: 2.5%;
  			// border-radius: 20px;
  			width: 90%;
  		}

  		.img1 {
  			width: 30rpx;
  			height: 30rpx;
  			position: absolute;
  			top: 20rpx;
			left: 520rpx;
  			right: 120rpx;
			z-index: 9;
  		}

  		

  	
  </style>